<template>
    <div>
        <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/userhome' }">个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a href="/user_dowload">下载记录</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>我的下载</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="tab-nav-bd">
                <span class="title">下载记录</span>
            </div>
        </el-card>
        <div style="margin-top: 20px;">

            <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important;padding: 28px 24px;">
                <div class="f2">
                    <ul class="filter-tab-list f">
                        <li class="active">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                        <li class="">全部</li>
                    </ul>
                    <div class="right-filter f2">
                        <div class="filter-date">
                            <el-date-picker v-model="value1" type="daterange" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD" range-separator="To" @change="calendarChange"
                                start-placeholder="开始时间" end-placeholder="结束时间" :size="size" @clear="clearPicker" />
                        </div>
                        <div class="icon-list">
                            <span class="js-type-show" :class="isActive == 0 ? 'active' : ''" @click="switchBtn(0)"
                                style="text-decoration: none;cursor: pointer;">
                                <el-icon :size="30" :color="isActive == 0 ? color : ''">
                                    <SvgIcon iconName="icon-table"/>
                                </el-icon>
                            </span>
                            <span class="js-type-show " :class="isActive == 1 ? 'active' : ''" @click="switchBtn(1)"
                                style="text-decoration: none;cursor: pointer;">
                                <el-icon :size="30" :color="isActive == 1 ? color : ''">
                                    <SvgIcon iconName="icon-all"/>
                                </el-icon>

                            </span>
                        </div>
                    </div>

                </div>
                <el-divider />
                <div class="table" :style="{ display: (isActive == 0 ? 'block' : 'none') }">
                    <el-table :data="dataArr" style="width: 100%" stripe :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ 'text-align': 'center' }">
                        <el-table-column label="图片">
                            <template #default="scope">
                                <el-image style="width: 100px;height: 100px; border-radius: 20px; cursor: pointer;"
                                    :src="scope.row.product.full_url"
                                    @click="productDetailClick(scope.row.product.id, scope.row.product.ascription)">
                                    <template #error>
                                        <div class="image-slot">
                                            <img :src="siteConf.defalut_product_img"
                                                style="width: 100%; height: 100%;object-fit: cover;" alt="默认图片" />
                                        </div>
                                    </template>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product.title" label="名称" />
                        <el-table-column prop="product.product_ids" label="KMID" />
                        <el-table-column prop="create_time" label="时间" />
                        <el-table-column prop="product.price" label="实付金额" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-text class="mx-1" style="text-decoration: none;cursor: pointer;" type="success"
                                    @click="lookDetail(scope.row)">查看详情</el-text>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
             
                <div :style="{ display: (isActive == 1 ? 'block' : 'none') }">
                    <ul class="download-log-list">
                        <li v-for="(item, index) in dataArr" :key="index">
                            <a @click="productDetailClick(item.product.id, item.product.ascription)">
                                <img :src="item.product.full_url" alt="" @error.once="useDefaultImage">
                                <div class="model-name">{{ item.product.title }}</div>
                                <div class="model-id">{{ item.product.product_ids }}</div>
                                <div class="model-contrast">
                                    <div class="js-download-detail" @click.stop="downloadClick(item.product.id)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                        <span class="balloon-tips">查看下载详情</span>
                                    </div>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="paginationclass" ><el-pagination
                        background v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
                        layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
                        :hide-on-single-page="true" /></div>
            </el-card>
        </div>
        <!-- 详情弹窗 -->
        <el-dialog v-model="dialogVisible" append-to-body align-center modal-class="overlay-modal" title="下载详情"
            :close-on-press-escape="false" :close-on-click-modal="false" width="500">
            <!-- <div class="layer-title">下载详情</div> -->
            <div class="layer-content">
                <div class="row f">
                    <img :src="detailItem.product.full_url" @error.once="useDefaultImage" alt="">
                    <div class="dowload-info">
                        <div class="info-title">{{ detailItem.product.title }}</div>
                        <a @click="productDetailClick(detailItem.product.id, detailItem.product.ascription)"
                            class="info-llId">{{
                            detailItem.product.product_ids }}</a>
                    </div>
                </div>
                <div class="row">
                    <span>使用资产</span>
                    <span>个人资产</span>
                </div>

                <div class="row">
                    <span>价格</span>
                    <span>{{ detailItem.product.price }} KM</span>
                    <span style="text-decoration: line-through;margin-left: 12px; color: #999;">
                        24 溜币</span>
                </div>
                <div class="row">
                    <span>下载时间</span>
                    <span>{{ detailItem.create_time }}</span>
                </div>
                <div class="row">
                    <span>下载来源</span>
                    <span>KM站</span>
                </div>
            </div>
        </el-dialog>

         <!-- 下载进度条弹窗 --->

    <el-dialog v-model="downloadDialogVisible" title="下载进度" width="500" append-to-body align-center modal-class="overlay-modal"
    :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false"> 
        <el-progress :text-inside="true" :stroke-width="26" :percentage="progress"></el-progress>
        <div v-if="progress == 100">下载完成</div>
    </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted } from "vue";
import { encrypt, DEFAULTKEY } from '../../utils/keyEnum'
import { userDownloadList } from '../../api/user';
import { productDownloadUrl, insertUserDownloadLog } from '../../api/product/index'
import { useUserInfo } from '../../stores/userInfo'
import { ElMessage } from 'element-plus';
const userInfo = useUserInfo() //获取用户信息
import axios from 'axios';
import router from '../../router'
const value1 = ref('')
const size = 'default'
const isActive = ref(0)
const color = ref('#e85623')
const dataArr = ref<any>([]);
const total = ref(0)
const dialogVisible = ref(false)
const detailItem = ref<any>([]);
const currentPage = ref(1); //当前页
const pageSize = ref(4) //每页显示条目个数
//切换表格和列表
const switchBtn = (index: number) => {
    isActive.value = index
    if(index == 1){
        currentPage.value = 1
        pageSize.value = 12
    }else{
        currentPage.value = 1
        pageSize.value = 4
    }
    dowloadInfo()
}
import { useSiteConfig } from '../../stores/siteConfig'
const siteConf = useSiteConfig()

const useDefaultImage = (event: any) => {
    event.target.src = siteConf.defalut_product_img
}
//数据源
const dowloadInfo = () => {
    userDownloadList({ limit: pageSize.value, page: currentPage.value }).then((res: any) => {
        if (res.code == 1) {
            dataArr.value = res.data.list
            total.value = res.data.total
        }
    });
}
//选择页数
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    dowloadInfo()
}
//日期选择触发
const calendarChange = (val: any) => {
}

//清空日期
const clearPicker = () => {
    currentPage.value = 1
    dowloadInfo()
}

//查看详情
const lookDetail = (item: any) => {
    dialogVisible.value = true
    detailItem.value = item
}

//详情
const productDetailClick = (id: number, ascription: any) => {
    const queryToAse = encrypt({
        product_id: id,
        ascription: ascription
    }, DEFAULTKEY)
    nextTick(() => {
        const resolvedRoute = router.resolve({
                    name: '/product-detail',

                    query: { value: queryToAse }

                    });

                    window.open(resolvedRoute.href, '_blank');
        //router.push({ name: '/product-detail', query: { value: queryToAse } })
    });
}



const downloadDialogVisible = ref(false)
const downloadClick = (id: number) => {
    if (userInfo.isLogin()) {
        //获取下载的url
        productDownloadUrl({ product_id: id }).then((res: any) => {
            if (res.code == 1) {
                //弹窗
                downloadDialogVisible.value = true;
                downloadFile(res.data.list)
            }
        }).catch((error: any) => {
            if (error.code == 0) {
                ElMessage.error(error.msg)
            } else {
                ElMessage.error("其他错误")
            }
        })
    } else {
        router.push({ name: '/login' })
    }

};
const progress = ref(0);
const downloadFile = async (item: any) => {
    await axios({
        method: 'get',
        url: item.url,
        responseType: 'blob',
        onDownloadProgress: (progressEvent: any) => {
            if (progressEvent.lengthComputable) {
                const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                progress.value = percentCompleted;
            }
        },
    }).then((res) => {
        const blob = new Blob([res.data]);
        // 非IE下载
        const elink = document.createElement("a");
        elink.download = item.name;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
        //添加下载记录
        insertUserDownloadLog({ product_id: item.id }).then((res_log: any) => {
            if (res_log.code == 1) {
                setTimeout(() => {
                    progress.value = 0;
                    downloadDialogVisible.value = false;
                }, 3000);
            }
        })
    }).catch((error) => {
        ElMessage.error("下载失败")
    }).finally(() => {
        downloadDialogVisible.value = false;
        dowloadInfo()
    });
}

onMounted(() => {
    dowloadInfo()
})

</script>
<style scoped>
.tab-nav-bd {
    margin-top: 16px;
}

.tab-nav-bd .title {
    font-size: 18px;
    font-weight: 700;
    color: #1D2129;
    line-height: 26px;
}


.f {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.f2 {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.filter-tab-list .active {
    color: #e85623;
    border-bottom: 3px solid #e85623;
}

.filter-tab-list>li {
    margin-right: 35px;
    padding-bottom: 18px;
    font-size: 16px;
    color: #1D2129;
    line-height: 22px;
    cursor: pointer;
}

.right-filter {
    padding-bottom: 12px;
}

.filter-date {
    position: relative;
}

.icon-list {
    margin-left: 8px;
}

.icon-list>span {
    margin-left: 12px;
}

.download-log-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -16px;
}

.download-log-list>li {
    position: relative;
    margin: 16px 0 0 10px;
    font-size: 14px;
    color: #86909C;
    line-height: 22px;
}

a {
    text-decoration: none;
    cursor: pointer;
}

.download-log-list>li img {
    margin-bottom: 4px;
    width: 201px;
    height: 151px;
    background: #E5E6EB;
    border-radius: 12px;
}

.download-log-list>li .model-name {
    width: 200px;
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1D2129;
}

.download-log-list>li .model-contrast {
    display: none;
    position: absolute;
    right: 8px;
    top: 8px;
}

.download-log-list>li .model-contrast>div {
    position: relative;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .6);
    border-radius: 6px;
    margin-bottom: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: left .5s, opacity .2s;
    transition: left .5s, opacity .2s;
}

.download-log-list>li .model-contrast .balloon-tips {
    display: none;
    position: absolute;
    right: 30px;
    top: 0;
    padding: 0 6px;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    color: #fff;
    background: rgba(29, 33, 41, .9);
    border-radius: 2px;
    white-space: nowrap;
}

.download-log-list>li .model-contrast>div:hover .balloon-tips {
    display: block
}

.download-log-list>li:hover .model-contrast {
    display: block
}

.paginationclass {
    margin-top: 37px;
    text-align: center;
}

.layer-title {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #1D2129;
    line-height: 24px;
}

.layer-content {
    margin-bottom: 32px;
    font-size: 14px;
    color: #1D2129;
    line-height: 22px;
}

.layer-content .row {
    font-size: 14px;
    color: #4E5969;
    line-height: 22px;
    margin-bottom: 8px;
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
}

.layer-content img {
    margin-right: 22px;
    margin-bottom: 16px;
    width: 70px;
    height: 53px;
    border-radius: 6px;
}

.layer-content .row .info-title {
    margin-bottom: 4px;
    color: #1D2129;
}

.layer-content .row .info-llId {
    color: #e85623;
    line-height: 22px;
}

.layer-content .row>span:nth-of-type(1) {
    margin-right: 37px;
    width: 56px;
    color: #86909C;
    white-space: break-spaces;
}

.layer-content .row>span {
    display: inline-block;
}
</style>